<template>
  <div>
    <div class="header-warpper" @click="$router.back(-1)">
      <img src="../../assets/l_jt.png" alt />
      <span>消息中心</span>
    </div>

    <ul>
      <li v-for="(item,index) in arr" :key="index">
        <router-link
          :to="{
            path: 'message',
            query:{id:item.id}
        }"
          class="name"
        >{{item.title}}</router-link>
        <p class="time">{{item.createtime}}</p>
      </li>
    </ul>

     <p class="pull">{{newxin}}</p>
  </div>
</template>

<script>
export default {
  created() {
    this.start();
  },
  data() {
    return {
      page: 1,
      arr: [],
      newxin:""
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    //下拉更新  vue下拉更新 下拉加载
    handleScroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight == scrollHeight) {
        //请求数据接口
        if (this.arr > 9) {
          this.page++;
          this.start(this.page);
          return false;
        }
      }
    },
    start(s) {
      this.$axios
        .post("/index/message/getlist", {
          page: this.page,
          limit: 10
        })
        .then(res => {
          console.log(res);
          // if (res.data.code == 0) {
          //   s?this.arr=this.arr.concat(res.data.info):this.arr = res.data.info;
          // }else{
          //     !s?this.newxin="没有消息":"";

          // }
          // !s&&res.data.info.length>0?this.newxin="已加载完":s&&res.data.info.length>9?
          // this.newxin="下拉更新":this.newxin="已加载完";

          if(res.data.code==0&&res.data.info.length>0){
            var he=()=>{
                for(var i=0; i<res.data.info.length; i++){
                  this.arr.push(res.data.info[i])
                }
            }
          !s&&res.data.info.length<9?(this.arr=res.data.info,this.newxin="已加载完所有数据"):
          !s&&res.data.info.length>9?(this.arr=res.data.info,this.newxin="下拉更新"):"";
          s&&res.data.info.length<9?(he(),this.newxin="已加载完所有数据")
          :s?(he(),this.newxin="下拉更新"):'';
          }else{
            !s?(this.newxin="没有消息",this.arr = []):this.newxin="已加载完所有数据";
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
ul {
  padding: 0 0.4rem;
}
li {
  padding: 0.4rem 0 0.6rem;
  border-bottom: 1px solid #ccc;
  color: #5a5a5a;
  text-align: left;
  .name {
    font-size: 0.45rem;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.2rem !important;
    font-weight: bold;
    color: #5a5a5a;
  }
  .time {
    font-size: 0.36rem;
  }
}
.pull {
  font-size: 0.4rem;
  padding: 0.4rem 0;
}
</style>

